Node / ReticulumProjects / MeshChatX.git / files / meshchatx / src / frontend / components / profile / ProfileIconPage.vue

Displaying Raw • Download

Tb4b4b4<Tff7b72templateTb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"flex flex-col flex-1 overflow-hidden min-w-0 dark:bg-zinc-950"Tb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"overflow-y-auto space-y-2 p-2"Tb4b4b4>

T8b949e<!-- info -->

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"bg-white dark:bg-zinc-800 rounded shadow"Tb4b4b4>

Tb4b4b4<Tff7b72div

Te6edf3classTff7b72=Ta5d6ff"flex border-b border-gray-300 dark:border-zinc-700 text-gray-700 dark:text-gray-200 p-2 font-semibold"

Tb4b4b4>

Customise your Profile Icon

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"text-gray-900 dark:text-gray-100"Tb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"text-sm p-2"Tb4b4b4>

Tb4b4b4<Tff7b72ul Te6edf3classTff7b72=Ta5d6ff"list-disc list-inside"Tb4b4b4>

Tb4b4b4<Tff7b72liTb4b4b4>Personalise your profile with a custom coloured icon.Tb4b4b4<Tb4b4b4/Tff7b72liTb4b4b4>

Tb4b4b4<Tff7b72liTb4b4b4>This icon will be sent in all of your outgoing messages.Tb4b4b4<Tb4b4b4/Tff7b72liTb4b4b4>

Tb4b4b4<Tff7b72liTb4b4b4>When you send someone a message, they will see your new icon.Tb4b4b4<Tb4b4b4/Tff7b72liTb4b4b4>

Tb4b4b4<Tff7b72liTb4b4b4>

You can

Tb4b4b4<Tff7b72span Te6edf3classTff7b72=Ta5d6ff"cursor-pointer underline text-blue-500" Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3removeProfileIconTa5d6ff"

Tb4b4b4>remove your iconTb4b4b4<Tb4b4b4/Tff7b72span

Tb4b4b4>, however it will still show for anyone that already received it.

Tb4b4b4<Tb4b4b4/Tff7b72liTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72ulTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

T8b949e<!-- colours -->

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"bg-white dark:bg-zinc-800 rounded shadow"Tb4b4b4>

Tb4b4b4<Tff7b72div

Te6edf3classTff7b72=Ta5d6ff"flex border-b border-gray-300 dark:border-zinc-700 text-gray-700 dark:text-gray-200 p-2 font-semibold"

Tb4b4b4>

Select your Colours

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"divide-y divide-gray-300 dark:divide-zinc-700 text-gray-900 dark:text-gray-100"Tb4b4b4>

T8b949e<!-- background colour -->

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"p-2 flex space-x-2"Tb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"flex my-auto"Tb4b4b4>

Tb4b4b4<Tff7b72ColourPickerDropdown Te6edf3v-modelTb4b4b4:Te6edf3colourTff7b72=Ta5d6ff"Te6edf3iconBackgroundColourTa5d6ff" Tb4b4b4/Tb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"my-auto"Tb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"text-sm font-medium text-gray-900 dark:text-gray-100"Tb4b4b4>Background ColourTb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"text-sm text-gray-900 dark:text-gray-100"Tb4b4b4>Tff7b72{{ Te6edf3iconBackgroundColour Tff7b72}}Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

T8b949e<!-- icon colour -->

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"p-2 flex space-x-2"Tb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"flex my-auto"Tb4b4b4>

Tb4b4b4<Tff7b72ColourPickerDropdown Te6edf3v-modelTb4b4b4:Te6edf3colourTff7b72=Ta5d6ff"Te6edf3iconForegroundColourTa5d6ff" Tb4b4b4/Tb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"my-auto"Tb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"text-sm font-medium text-gray-900 dark:text-gray-100"Tb4b4b4>Icon ColourTb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"text-sm text-gray-900 dark:text-gray-100"Tb4b4b4>Tff7b72{{ Te6edf3iconForegroundColour Tff7b72}}Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

T8b949e<!-- search icons -->

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"bg-white dark:bg-zinc-800 rounded shadow"Tb4b4b4>

Tb4b4b4<Tff7b72div

Te6edf3classTff7b72=Ta5d6ff"flex border-b border-gray-300 dark:border-zinc-700 text-gray-700 dark:text-gray-200 p-2 font-semibold"

Tb4b4b4>

Select your Icon

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"divide-y divide-gray-300 dark:divide-zinc-700 text-gray-900 dark:text-gray-100"Tb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"flex p-1"Tb4b4b4>

Tb4b4b4<Tff7b72input

Te6edf3v-modelTff7b72=Ta5d6ff"Te6edf3searchTa5d6ff"

Te6edf3typeTff7b72=Ta5d6ff"text"

Tb4b4b4:Te6edf3placeholderTff7b72=Ta5d6ff"Ta5d6ff`Ta5d6ffSearch Tffd700${Te6edf3iconNamesTb4b4b4.Te6edf3lengthTffd700}Ta5d6ff icons...Ta5d6ff`Ta5d6ff"

Te6edf3classTff7b72=Ta5d6ff"bg-gray-50 dark:bg-zinc-700 border border-gray-300 dark:border-zinc-600 text-gray-900 dark:text-gray-100 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-600 block w-full p-2.5"

Tb4b4b4/Tb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"divide-y divide-gray-300 dark:divide-zinc-700"Tb4b4b4>

Tb4b4b4<Tff7b72div

Te6edf3v-forTff7b72=Ta5d6ff"Te6edf3mdiIconName Tff7b72of Te6edf3searchedIconNamesTa5d6ff"

Tb4b4b4:Te6edf3keyTff7b72=Ta5d6ff"Te6edf3mdiIconNameTa5d6ff"

Te6edf3classTff7b72=Ta5d6ff"flex space-x-2 p-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-700"

Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3onIconClickTb4b4b4(Te6edf3mdiIconNameTb4b4b4)Ta5d6ff"

Tb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"my-auto"Tb4b4b4>

Tb4b4b4<Tff7b72LxmfUserIcon

Tb4b4b4:Te6edf3icon-nameTff7b72=Ta5d6ff"Te6edf3mdiIconNameTa5d6ff"

Tb4b4b4:Te6edf3icon-foreground-colourTff7b72=Ta5d6ff"Te6edf3iconForegroundColourTa5d6ff"

Tb4b4b4:Te6edf3icon-background-colourTff7b72=Ta5d6ff"Te6edf3iconBackgroundColourTa5d6ff"

Tb4b4b4/Tb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"my-auto"Tb4b4b4>Tff7b72{{ Te6edf3mdiIconName Tff7b72}}Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3searchedIconNamesTb4b4b4.Te6edf3length Tff7b72=== T79c0ff0Ta5d6ff" Te6edf3classTff7b72=Ta5d6ff"p-1 text-sm text-gray-500"Tb4b4b4>

No icons match your search.

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3searchedIconNamesTb4b4b4.Te6edf3length Tff7b72=== Te6edf3maxSearchResultsTa5d6ff" Te6edf3classTff7b72=Ta5d6ff"p-1 text-sm text-gray-500"Tb4b4b4>

A maximum of Tff7b72{{ Te6edf3maxSearchResults Tff7b72}} icons are shown.

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72templateTb4b4b4>

Tb4b4b4<Tff7b72scriptTb4b4b4>

Tff7b72import Tff7b72* Tff7b72as Te6edf3mdi Tff7b72from Ta5d6ff"@mdi/js"Tb4b4b4;

Tff7b72import Te6edf3LxmfUserIcon Tff7b72from Ta5d6ff"../LxmfUserIcon.vue"Tb4b4b4;

Tff7b72import Te6edf3DialogUtils Tff7b72from Ta5d6ff"../../js/DialogUtils"Tb4b4b4;

Tff7b72import Te6edf3ToastUtils Tff7b72from Ta5d6ff"../../js/ToastUtils"Tb4b4b4;

Tff7b72import Te6edf3ColourPickerDropdown Tff7b72from Ta5d6ff"../ColourPickerDropdown.vue"Tb4b4b4;

Tff7b72export Tff7b72default Tb4b4b4{

Te6edf3nameTff7b72: Ta5d6ff"ProfileIconPage"Tb4b4b4,

Te6edf3componentsTff7b72: Tb4b4b4{

Te6edf3ColourPickerDropdownTb4b4b4,

Te6edf3LxmfUserIconTb4b4b4,

Tb4b4b4}Tb4b4b4,

Te6edf3dataTb4b4b4(Tb4b4b4) Tb4b4b4{

Tff7b72return Tb4b4b4{

Te6edf3configTff7b72: Tff7b72nullTb4b4b4,

Te6edf3iconForegroundColourTff7b72: Tff7b72nullTb4b4b4,

Te6edf3iconBackgroundColourTff7b72: Tff7b72nullTb4b4b4,

Te6edf3searchTff7b72: Ta5d6ff""Tb4b4b4,

Te6edf3maxSearchResultsTff7b72: T79c0ff100Tb4b4b4,

Te6edf3iconNamesTff7b72: Tb4b4b4[Tb4b4b4]Tb4b4b4,

Tb4b4b4}Tb4b4b4;

Tb4b4b4}Tb4b4b4,

Te6edf3computedTff7b72: Tb4b4b4{

Te6edf3searchedIconNamesTb4b4b4(Tb4b4b4) Tb4b4b4{

Tff7b72return Tff7b72thisTb4b4b4.Te6edf3iconNames

Tb4b4b4.Te6edf3filterTb4b4b4(Tb4b4b4(Te6edf3iconNameTb4b4b4) Tb4b4b4=> Tb4b4b4{

Tff7b72return Te6edf3iconNameTb4b4b4.Te6edf3includesTb4b4b4(Tff7b72thisTb4b4b4.Te6edf3searchTb4b4b4)Tb4b4b4;

Tb4b4b4}Tb4b4b4)

Tb4b4b4.Te6edf3sliceTb4b4b4(T79c0ff0Tb4b4b4, Tff7b72thisTb4b4b4.Te6edf3maxSearchResultsTb4b4b4)Tb4b4b4;

Tb4b4b4}Tb4b4b4,

Tb4b4b4}Tb4b4b4,

Te6edf3watchTff7b72: Tb4b4b4{

Te6edf3configTb4b4b4(Tb4b4b4) Tb4b4b4{

T8b949e// update ui when config is updated

Tff7b72thisTb4b4b4.Te6edf3iconName Tff7b72= Tff7b72thisTb4b4b4.Te6edf3configTb4b4b4.Te6edf3lxmf_user_icon_nameTb4b4b4;

Tff7b72thisTb4b4b4.Te6edf3iconForegroundColour Tff7b72= Tff7b72thisTb4b4b4.Te6edf3configTb4b4b4.Te6edf3lxmf_user_icon_foreground_colour Tff7b72|| Ta5d6ff"#6b7280"Tb4b4b4;

Tff7b72thisTb4b4b4.Te6edf3iconBackgroundColour Tff7b72= Tff7b72thisTb4b4b4.Te6edf3configTb4b4b4.Te6edf3lxmf_user_icon_background_colour Tff7b72|| Ta5d6ff"#e5e7eb"Tb4b4b4;

Tb4b4b4}Tb4b4b4,

Tb4b4b4}Tb4b4b4,

Te6edf3mountedTb4b4b4(Tb4b4b4) Tb4b4b4{

Tff7b72thisTb4b4b4.Te6edf3getConfigTb4b4b4(Tb4b4b4)Tb4b4b4;

T8b949e// load icon names

Tff7b72thisTb4b4b4.Te6edf3iconNames Tff7b72= Tffa657ObjectTb4b4b4.Te6edf3keysTb4b4b4(Te6edf3mdiTb4b4b4)Tb4b4b4.Te6edf3mapTb4b4b4(Tb4b4b4(Te6edf3mdiIconTb4b4b4) Tb4b4b4=> Tb4b4b4{

Tff7b72return Te6edf3mdiIcon

Tb4b4b4.Te6edf3replaceTb4b4b4(Ta5d6ff/^mdi/Tb4b4b4, Ta5d6ff""Tb4b4b4) T8b949e// Remove the "mdi" prefix

Tb4b4b4.Te6edf3replaceTb4b4b4(Ta5d6ff/([a-z])([A-Z])/gTb4b4b4, Ta5d6ff"$1-$2"Tb4b4b4) T8b949e// Add a hyphen between lowercase and uppercase letters

Tb4b4b4.Te6edf3toLowerCaseTb4b4b4(Tb4b4b4)Tb4b4b4; T8b949e// Convert the entire string to lowercase

Tb4b4b4}Tb4b4b4)Tb4b4b4;

Tb4b4b4}Tb4b4b4,

Te6edf3methodsTff7b72: Tb4b4b4{

Tff7b72async Te6edf3getConfigTb4b4b4(Tb4b4b4) Tb4b4b4{

Tff7b72try Tb4b4b4{

Tff7b72const Te6edf3response Tff7b72= Tff7b72await Tffa657windowTb4b4b4.Te6edf3axiosTb4b4b4.Te6edf3getTb4b4b4(Ta5d6ff"/api/v1/config"Tb4b4b4)Tb4b4b4;

Tff7b72thisTb4b4b4.Te6edf3config Tff7b72= Te6edf3responseTb4b4b4.Te6edf3dataTb4b4b4.Te6edf3configTb4b4b4;

Tb4b4b4} Tff7b72catch Tb4b4b4(Te6edf3eTb4b4b4) Tb4b4b4{

T8b949e// do nothing if failed to load config

Te6edf3consoleTb4b4b4.Te6edf3logTb4b4b4(Te6edf3eTb4b4b4)Tb4b4b4;

Tb4b4b4}

Tb4b4b4}Tb4b4b4,

Tff7b72async Te6edf3updateConfigTb4b4b4(Te6edf3configTb4b4b4) Tb4b4b4{

Tff7b72try Tb4b4b4{

Tff7b72const Te6edf3response Tff7b72= Tff7b72await Tffa657windowTb4b4b4.Te6edf3axiosTb4b4b4.Te6edf3patchTb4b4b4(Ta5d6ff"/api/v1/config"Tb4b4b4, Te6edf3configTb4b4b4)Tb4b4b4;

Tff7b72thisTb4b4b4.Te6edf3config Tff7b72= Te6edf3responseTb4b4b4.Te6edf3dataTb4b4b4.Te6edf3configTb4b4b4;

Tb4b4b4} Tff7b72catch Tb4b4b4(Te6edf3eTb4b4b4) Tb4b4b4{

Te6edf3ToastUtilsTb4b4b4.Te6edf3errorTb4b4b4(Ta5d6ff"Failed to save config!"Tb4b4b4)Tb4b4b4;

Te6edf3consoleTb4b4b4.Te6edf3logTb4b4b4(Te6edf3eTb4b4b4)Tb4b4b4;

Tb4b4b4}

Tb4b4b4}Tb4b4b4,

Tff7b72async Te6edf3onIconClickTb4b4b4(Te6edf3iconNameTb4b4b4) Tb4b4b4{

T8b949e// ensure foreground colour set

Tff7b72if Tb4b4b4(Tff7b72thisTb4b4b4.Te6edf3iconForegroundColour Tff7b72== Tff7b72nullTb4b4b4) Tb4b4b4{

Te6edf3DialogUtilsTb4b4b4.Te6edf3alertTb4b4b4(Ta5d6ff"Please select an icon colour first"Tb4b4b4)Tb4b4b4;

Tff7b72returnTb4b4b4;

Tb4b4b4}

T8b949e// ensure background colour set

Tff7b72if Tb4b4b4(Tff7b72thisTb4b4b4.Te6edf3iconBackgroundColour Tff7b72== Tff7b72nullTb4b4b4) Tb4b4b4{

Te6edf3DialogUtilsTb4b4b4.Te6edf3alertTb4b4b4(Ta5d6ff"Please select a background colour first"Tb4b4b4)Tb4b4b4;

Tff7b72returnTb4b4b4;

Tb4b4b4}

T8b949e// confirm user wants to update their icon

Tff7b72if Tb4b4b4(Tff7b72!Tb4b4b4(Tff7b72await Te6edf3DialogUtilsTb4b4b4.Te6edf3confirmTb4b4b4(Ta5d6ff"Are you sure you want to set this as your profile icon?"Tb4b4b4)Tb4b4b4)Tb4b4b4) Tb4b4b4{

Tff7b72returnTb4b4b4;

Tb4b4b4}

T8b949e// save icon appearance

Tff7b72await Tff7b72thisTb4b4b4.Te6edf3updateConfigTb4b4b4(Tb4b4b4{

Te6edf3lxmf_user_icon_nameTff7b72: Te6edf3iconNameTb4b4b4,

Te6edf3lxmf_user_icon_foreground_colourTff7b72: Tff7b72thisTb4b4b4.Te6edf3iconForegroundColourTb4b4b4,

Te6edf3lxmf_user_icon_background_colourTff7b72: Tff7b72thisTb4b4b4.Te6edf3iconBackgroundColourTb4b4b4,

Tb4b4b4}Tb4b4b4)Tb4b4b4;

Tb4b4b4}Tb4b4b4,

Tff7b72async Te6edf3removeProfileIconTb4b4b4(Tb4b4b4) Tb4b4b4{

T8b949e// confirm user wants to remove their icon

Tff7b72if Tb4b4b4(

Tff7b72!Tb4b4b4(Tff7b72await Te6edf3DialogUtilsTb4b4b4.Te6edf3confirmTb4b4b4(

Ta5d6ff"Are you sure you want to remove your profile icon? Anyone that has already received it will continue to see it until you send them a new icon."

Tb4b4b4)Tb4b4b4)

Tb4b4b4) Tb4b4b4{

Tff7b72returnTb4b4b4;

Tb4b4b4}

T8b949e// remove profile icon

Tff7b72await Tff7b72thisTb4b4b4.Te6edf3updateConfigTb4b4b4(Tb4b4b4{

Te6edf3lxmf_user_icon_nameTff7b72: Tff7b72nullTb4b4b4,

Te6edf3lxmf_user_icon_foreground_colourTff7b72: Tff7b72nullTb4b4b4,

Te6edf3lxmf_user_icon_background_colourTff7b72: Tff7b72nullTb4b4b4,

Tb4b4b4}Tb4b4b4)Tb4b4b4;

Tb4b4b4}Tb4b4b4,

Tb4b4b4}Tb4b4b4,

Tb4b4b4}Tb4b4b4;

Tb4b4b4<Tb4b4b4/Tff7b72scriptTb4b4b4>